<template>
    <div class="goods-hot">
        <h3>{{ title }}</h3>
        <!-- 商品区块 -->
        <RouterLink to="/" class="goods-item" v-for="item in goodList" :key="item">
            <img :src="item.picture"/>
            <p class="name ellipsis">{{ item.name }}</p>
            <p class="desc ellipsis">{{ item.desc }}</p>
            <p class="price">&yen;{{ item.price }}</p>
        </RouterLink>
    </div>
</template>

<script setup>
    import { getHotGoodsAPI } from '@/apis/detail'
    import { reactive,onMounted,computed } from 'vue'
    import { useRoute } from 'vue-router'


    const props = defineProps({
        hotType:{
            type:Number
        }
    })

    const TYPEMAP = {
        1:'24小时热榜',
        2:'周热榜'
    }

    const title = computed(() => {
        return TYPEMAP[props.hotType]
    })

    const route = useRoute()
    const goodList = reactive([])
    const getHotList = async () => {
        const { result } = await getHotGoodsAPI({
            id:route.params.id,
            type:props.hotType
        })
        Object.assign(goodList,result)
    }

    onMounted(() => {
        getHotList()
    })

</script>

<style lang="scss" scoped>
    .goods-hot {
        h3 {
            height: 70px;
            background: $helpColor;
            color: #fff;     
            font-size: 18px;
            line-height: 70px;
            padding-left: 25px;
            margin-bottom: 10px;
            font-weight: normal;
        }

        .goods-item {
            display: block;
            padding: 20px 30px;
            text-align: center;
            background-color: #fff;

            img {
                width: 160px;
                height: 160px;
            }

            p {
                padding-top: 10px;
            }

            .name {
                font-size: 16px;
            }

            .desc {
                color: #999;
                height: 29px;
            }

            .price {
                color: $priceColor;
                font-size: 20px;
            }
        }
    }
</style>